import React, { useState } from "react";
import { MyNavBar } from "../../../../components";
import { useNavigate } from "react-router-dom";
import MyCard from "../../../../components/myCard";
import style from "./style.module.scss";
import idCardFront from "../../../../assets/images/image/hdpi/id_card_front.png";
import idCardBack from "../../../../assets/images/image/hdpi/id_card_back.png";
import { MyMack } from "../../../../components/myMack";

const Index: React.FC = () => {
  const navigate = useNavigate();

  const [isFlag, setIsFlag] = useState(false);
  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const tar = e.target as HTMLInputElement;
    console.log(tar.files);

    setIsFlag(false);
  };
  return (
    <>
      <MyNavBar title="绑定身份证" onClickLeft={() => navigate(-1)}></MyNavBar>

      <div className={style.content}>
        <div className={style.card}>
          <MyCard
            backgroundImg={idCardFront}
            onClick={() => {
              setIsFlag(true);
            }}
          ></MyCard>
        </div>

        <div className={style.card}>
          <MyCard
            backgroundImg={idCardBack}
            onClick={() => {
              setIsFlag(true);
            }}
          ></MyCard>
        </div>

        <button
          className={style.subBtn}
          onClick={() => {
            navigate("/my/wallet/mywallet", { replace: true });
          }}
        >
          确定
        </button>
      </div>

      {/* 蒙层 */}
      {isFlag && (
        <MyMack
          type="select"
          onCancel={() => setIsFlag(false)}
          onConfirm={() => setIsFlag(false)}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e)}
        ></MyMack>
      )}
    </>
  );
};
export default Index;
